<template>
	<view>
		<view class="page_title">
		  <view class="page_name">红娘</view>
		</view>
		
		<scroll-view scroll-y class="scroll" :refresher-enabled="true"
		:refresher-triggered="isTrigger" @refresherrefresh="handleRefresh" 
		refresher-background='tranparent'>
		  <view class="heartList banxin">
		    <view class="service_box" v-for="item in matcherList">
		      <view class="service" @click="handleDetail(item.id)" >
		        <image :src="item.headPhoto" mode=""/>
		        <view class="content">
		          <view class="service_title">
		            <view class="name">{{item.name}} </view> 
		          </view> 
		          <text>{{item.slogan}}</text> 
		        </view>
		        <view class="islike">
		          <image @click.stop="handlePopup(item.qrCode)"  src="/static/img/_wx.png" mode=""/>
		        </view>
		      </view>
		      <!-- <view class="example">
		        <text class="title">成功案例：</text> 
		        <text class="info">
		          恭喜会员李**与张**牵线成功！
		          恭喜会员李**与张**牵线成功！
		        </text>
		      </view> -->
		    </view>
		  </view>
		</scroll-view>
		
		<tab-bar activeWay='matcher'></tab-bar>
		
		
		<u-popup closeable :show="showPopup" mode='center' @close="handleClose">
		  <view class="matcher">
		    <image src="/static/img/matcher.png" mode=""/>
		  </view>
		  <view class="title">
		    长按二维码添加红娘微信
		  </view>
		
		  <view class="code">
		    <image :show-menu-by-longpress="true" :src="qrCode" mode=""/>
		  </view>
		</u-popup>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import TabBar from '@/components/TabBar.vue'
	
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				matcherList:[],
				showPopup:false,
				isTrigger:false,
				_freshing: false,
				qrCode:'/static/img/matcher.png'
			}
		},
		onShow() {
			this.initHeartList()
		},
		methods:{
			initHeartList(){
				request(`/matchmaker/list`).then((res)=>{
				  console.log(res.data.data,'myBridge');
				  this.matcherList = res.data.data.data
				  this.isTrigger = false
				  this._freshing = false
				})
			  },
			  handleRefresh(){
				  if (this._freshing) return
				  this._freshing = true
				  this.isTrigger = true;
				  this.initHeartList()
			  },
			  handleClose(){
				this.showPopup = false
			  },
			  handlePopup(qrCode){
				this.showPopup = true
				this.qrCode = qrCode
			  }
		}
	}
</script>

<style lang="scss">
@import "@/style/mstcher.scss";

page{
  background-color: rgba(249, 249, 249, 1);
}

.page_title{
  height: 300rpx;
}

.heartList{
  // margin-top: -120rpx;
}
.service_box{
  padding:30rpx 50rpx;
  border-radius: 60rpx;
  background-color: rgba(255, 255, 255, 1);;
  margin-top: 20rpx;
  .service{
    display: flex;
    justify-content: space-between;
    align-items: center;
    >image{
      width: 100rpx;
      height: 100rpx;
      margin-right: 40rpx;
      border-radius: 50%;
    }
    .content{
      flex: 1;
	  height: 100rpx;
	  // background-color: #114428;
      .service_title{
        display: flex;
        color: rgba(51, 51, 51, 1);
        align-items: center;
        font-weight: 500;
        line-height: 56rpx;
        margin-bottom: 20rpx;
        .name{
          max-width: 150rpx;
          margin-right: 10rpx;
          white-space: nowrap; /* 确保文本在一行内显示 */
          overflow: hidden; /* 隐藏溢出的内容 */
          text-overflow: ellipsis; 
        }
      }
      text{
		  display: block;
        font-size: 24rpx;
		margin-top: -10rpx;
        color: rgba(102, 102, 102, 1);
      }
    }
    .islike{
      image{
        display: block;
        width: 80rpx;
        height: 80rpx;
        margin: auto;
      }
    }
  }
  .example{
    font-size: 24rpx;
    padding:20rpx 30rpx;
    margin-top: 20rpx;
    border-radius: 20rpx;
    line-height: 40rpx;
    color: rgba(102, 102, 102, 1);
    background-color: rgba(245, 245, 255, 1);
    .title{
		font-size: 24rpx;
      color: rgba(51, 51, 51, 1);
      font-weight: 500;
    }
    .info{
		font-size: 24rpx;
      display: block;
      // margin-top: 10rpx;
    }
  }
}
</style>
